import React, { useEffect } from 'react';
export default class Map extends React.Component {
  componentDidMount() {
    // React脚手架中全局变量都要用window去访问
    //const BMap = window.BMap 这样写也可以

    // const {BMap} = window
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          var address =
            r.address.province + r.address.city + r.address.district;
          window.lat = r.point.lat; //window.lat是在其他页面设置的全局变量
          window.lng = r.point.lng; //window.lng是在其他页面设置的全局变量
          const map = new BMap.Map('container');
          // 设置中心点
          const point = new BMap.Point(window.lng, window.lat);
          // 地图初始化，同时设置地图展示级别
          map.centerAndZoom(point, 15);
        } else {
          alert('failed' + this.getStatus());
        }
        var site = document.getElementById('address');
        site.innerText = address;
      },
      { enableHighAccuracy: true },
    );
  }
  render() {
    return (
      <div className="map">
        {/* 地图容器元素 */}
        <div id="container" style={{ width: '400px', height: '400px' }}></div>
        <div style={{ display: 'flex' }}>
          当前你的地址为：<div id="address"></div>
        </div>
      </div>
    );
  }
}
